<template>
  <div class="add">
    <el-form ref="addExamRef" :model="examForm.examInfo" label-width="80px">
      <el-form-item label="考试课程"
                    prop="subject"
                    :rules="[{required: true, message: '考试课程不能为空', trigger: 'change'}]">
        <el-input v-model="examForm.examInfo.subject"></el-input>
      </el-form-item>
      <el-form-item label="考试描述"
                    prop="subject"
                    :rules="[{required: true, message: '考试课程不能为空', trigger: 'change'}]">
        <el-input v-model="examForm.examInfo.description"></el-input>
      </el-form-item>
      <el-form-item label="考试/练习"
                    prop="practiceOrExam"
                    :rules="[
                            {required: true, message: '考试/练习不能为空', trigger: 'change'},
                            {validator: checkPracticeOrExam, trigger: 'change'}
                            ]">
        <el-input v-model="examForm.examInfo.practiceOrExam"></el-input>
      </el-form-item>
      <el-form-item label="所属题库"
                    prop="paperId"
                    :rules="[
                            {required: true, message: '请选择题库', trigger: 'change'},
                            ]">
        <el-select v-model="examForm.examInfo.paperId" class="m-2" placeholder="请选择题库">
          <el-option
              v-for="(item,index) in examForm.paper"
              :key="index"
              :label="item.id +': '+item.paperName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所属学院"
                    prop="institute"
                    v-if="role === '0'"
                    :rules="[{required: true, message: '所属学院不能为空', trigger: 'change'}]">
        <el-input v-model="examForm.examInfo.institute"></el-input>
      </el-form-item>
      <el-form-item label="所属学院"
                    prop="institute"
                    v-if="role === '1'">
        <el-input v-model="examForm.examInfo.institute" disabled></el-input>
      </el-form-item>
      <el-form-item label="所属专业"
                    prop="major"
                    :rules="[{required: true, message: '所属专业不能为空', trigger: 'change'}]">
        <el-input v-model="examForm.examInfo.major"></el-input>
      </el-form-item>
      <el-form-item label="考试年级"
                    prop="grade"
                    :rules="[
                              {required: true, message: '年级不能为空', trigger: 'change'},
                              {validator: checkNumber, trigger: 'change'}
                            ]">
        <el-input v-model="examForm.examInfo.grade"></el-input>
      </el-form-item>

      <el-form-item label="考试班级"
                    prop="clazz"
                    :rules="[
                              {required: true, message: '班级不能为空', trigger: 'change'},
                              {validator: checkNumber, trigger: 'change'}
                            ]">
        <el-input v-model="examForm.examInfo.clazz"></el-input>
      </el-form-item>

      <el-form-item label="考试日期"
                    prop="examDate"
                    :rules="[{required: true, message: '请选择考试日期', trigger: 'change'}]">
        <el-col :span="11">
          <el-date-picker placeholder="选择日期" v-model="examForm.examInfo.examDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="考试时长"
                    prop="time"
                    :rules="[
                              {required: true, message: '考试时长不能为空', trigger: 'change'},
                              {validator: checkNumber, trigger: 'change'}
                            ]">
        <el-input v-model="examForm.examInfo.time"></el-input>
      </el-form-item>
      <el-form-item label="考试总分"
                    prop="examScore"
                    :rules="[
                              {required: true, message: '考试时长不能为空', trigger: 'change'},
                              {validator: checkNumber, trigger: 'change'}
                            ]">
        <el-input v-model="examForm.examInfo.examScore"></el-input>
      </el-form-item>
      <el-form-item label="考试类型"
                    prop="type"
                    :rules="[{required: true, message: '试卷类型不能为空', trigger: 'change'}]">
        <el-input v-model="examForm.examInfo.type"></el-input>
      </el-form-item>
      <el-form-item label="考生提示">
        <el-input type="textarea" v-model="examForm.examInfo.tips"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSubmit()">创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AES from "@/utils/AESUtil";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";

export default {
  name: "addExam",
  setup(){
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    let addExamRef = ref(null)
    // eslint-disable-next-line no-undef
    let role = ref(AES.Decrypt($cookies.get("role")))
    let examForm = reactive({
      examInfo: {
        subject: null,
        description: null,
        practiceOrExam: null,
        paperId: null,
        institute: null,
        major: null,
        grade: null,
        clazz: null,
        examDate: null,
        time: null,
        examScore: null,
        type: null,
        tips: null
      },
      paper: []
    })
    let checkPracticeOrExam = (rule,value,callback) => {
      if (value === '考试' || value === '练习') {
        callback()
      }else {
        callback(new Error('只能输入考试/练习'))
      }
    }
    let checkNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }else {
        callback()
      }
    }
    onMounted(()=>{
      getInfo()
    })
    function getInfo(){
      proxy.$axios.get(
          `/manage/paper`
      ).then(
          response => {
            examForm.paper = response.data
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
      if (role.value === '1') {
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/teacher/${$cookies.get("id")}`
        ).then(
            response => {
              examForm.examInfo.institute = response.data.institute
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }
    }
    function addSubmit(){
      proxy.$refs.addExamRef.validate((valid) => {
        if (valid) {
          proxy.$axios.post(
              `/manage/exam/add`,
              {...examForm.examInfo}
          ).then(
              response => {
                if (response.data){
                  ElMessage({
                    type: 'success',
                    message: '添加成功',
                  })
                  router.push({path: '/manage'})
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })
    }
    return{
      role,
      examForm,
      addExamRef,
      checkPracticeOrExam,
      checkNumber,
      addSubmit,
    }
  }
}
</script>

<style scoped>
.add {
  padding: 0px 40px;
  width: 400px;
  margin-left: 300px;
}
</style>